import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';

export default function HeroDetail() {
  //获取当前网页地址栏 URL 的参数   params 传参
  // let {id} = useParams();
  //获取 querystring 参数
  // console.log(window.location);
  //原生方式获取 url 的查询字符串参数  querystring 传参
  // let [result] = useSearchParams();
  // let id = result.get('id');
  // 获取 state 传参的 id
  let result = useLocation();
  // console.log(result);
  let id = result.state.id;
  
  //获取指定 id 对应的英雄数据
  // let id = 5;
  //声明一个状态, 英雄详情数据
  let [hero, setHero] = useState({});

  //获取 navigate 函数
  let navigate = useNavigate();

  //发送请求
  useEffect(() => {
    (async () => {
      //发送请求, 获取英雄数据
      let response = await axios.get(`https://api.xiaohigh.com/heros/${id}`);
      //获取响应体的数据
      let {data} = response;
      //更新状态
      setHero(data);
    })()
  }, [])

  //返回按钮的单击事件处理程序
  let back = () => {
    navigate(-1);
  }

  return (
    <div className="container detail" style={{paddingTop: 30}}>
      {/* 左侧 */}
      <div className="col-xs-3">
        <div className="info" style={{background: '#eee', padding: 20}}>
          <button onClick={back} className='btn btn-sm btn-danger'>返回</button>
          <h3>{hero.name}</h3>
          <p>{hero.type}</p>
          <div className="row">
            {
              hero.skills?.map((item, index) => {
                return <div className="col-xs-3" key={index} >
                          <img width="100%" src={`http://cdn.xiaohigh.com${item.img}`} alt="" />
                          <p style={{fontSize: 12}}>{item.name}</p>
                        </div>
              })
            }
          </div>
        </div>
      </div>

      {/* 右侧 */}
      <div className="col-xs-9">
        <img width="100%" src={hero.big_image ? `http://cdn.xiaohigh.com${hero.big_image}` : ''} alt="" />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}></p>
      </div>
    </div>
  )
}
